<!--组织树-->
<template>
  <div id="organizationTree" class="flex-main">
    <el-cascader
      ref="cascader"
      :options="treeDatas"
      :props="{ leaf: 'leaf',checkStrictly: true,value:'id',multiple :multiple }"
      @change="handleNodeClick" />
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: [String, Array],
      required: false,
      default() {
        return ''
      }
    },
    multiple: { type: Boolean, default: false }, // 多选单选
    isSelectedParent: { type: Boolean, default: true }, // 是否允许选择父节点  默认运行
    isDept: { type: Boolean, default: true }
  },
  data() {
    return {
      defaultTreeProps: {
        children: 'children',
        label: 'label'
      },
      treeDatas: [],
      selectedValue: '',
      listQuery: {
        type: this.isDept ? null : 1
      },
      fullPathName: [],
      fullPathId: []
    }
  },
  watch: {
    selectedValue: function(val) {
      this.$emit('input', val)
    },
    value: function(val) {
      if (!val) {
        this.$nextTick(() => {
          this.$refs.cascader.panel.checkedValue = []
          this.$refs.cascader.panel.activePath = []
          this.$refs.cascader.panel.syncActivePath()
          // this.$refs.cascader.clearCheckedNodes()
        })
      }
      setTimeout(() => {
        this.selectedValue = val
      }, 200)
    }
  },
  mounted() {},
  created() {
    this.loadOrganizationTree()
  },
  methods: {
    async loadOrganizationTree() {
      this.treeDatas.length = 0
      this.treeLoading = true
      this.listQuery.pid = 0
      const response = await this.$store.dispatch('loadOrganizationTree', this.listQuery)
      this.treeDatas = (response)
      this.treeLoading = false
    },
    handleNodeClick(data) {
      this.selectedValue = data
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" >

</style>
